import { Icon } from "@iconify/react";
import { Card } from "antd";
import { useEffect, useState } from "react";
import styled from "styled-components";

const Styled = styled.div`
  .ant-card-body {
    padding: 10px;
  }
  .header {
    display: flex;
    p {
      flex: 1;
      text-align: center;
    }
  }
  .arrow {
    animation: 1s passing infinite;
  }

  // 左 -> 右 闪的特效
  @keyframes passing {
    0% {
      transform: translateX(-50%);
      opacity: 0;
    }

    50% {
      transform: translateX(0);
      opacity: 1;
    }

    100% {
      transform: translateX(50%);
      opacity: 0;
    }
  }
`;

const TalkingCarousel = () => {
  let [sentence, setSentence] = useState("");

  useEffect(() => {
    fetch("https://v1.hitokoto.cn?c=i")
      .then((res) => res.json())
      .then((data) => setSentence(data.hitokoto))
      .catch(() => {
        setSentence("书山有路勤为径，学海无涯苦作舟。");
      });
  }, []);

  return (
    <Styled>
      <Card hoverable style={{ minWidth: "100%" }}>
        <div className="header">
          <Icon icon="mdi:chat-outline" fontSize={20} />
          <p>{sentence}</p>
          <Icon
            className="arrow"
            fontSize={20}
            icon="material-symbols-light:double-arrow"
          />
        </div>
      </Card>
    </Styled>
  );
};

export default TalkingCarousel;
